{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        {#        <form name="Form" role="search" action="/oratk_app/oratk_monitor_immediate_new" onsubmit="return validateForm()"#}
        {#              method="POST">#}
        <form name="Form" role="search">
            <h3 class="page-header">即时巡检</h3>
            <div class="navbar-form navbar-left">
                &nbsp 选择巡检模板: &nbsp
                {#                <select class="form-control" name="conn_string" id="conn_string">#}
                <select class="selectpicker show-tick " style="width:450px" data-live-search="true" name="template_name"
                        id="template">

                    <option id="def">--请选模板--</option>
                    {% for i in template_result %}
                        <option id="a">{{ i.id }}.{{ i.name }}</option>
                    {% endfor %}
                </select>
                &nbsp 选择实例: &nbsp
                {#                <select class="form-control" name="conn_string" id="conn_string">#}
                <select class="selectpicker show-tick " style="width:450px" data-live-search="true" name="conn_string"
                        id="conn_string" multiple="multiple">

                    {% for i in instanceinfo_result %}
                        <option id="a">{{ i.id }}.{{ i.dbname }}={{ i.conn_string }}</option>
                    {% endfor %}
                </select>
                <button type="button" class="btn btn-default" id="bt_monitor" onclick="button_monitor()">即时巡检</button>
                {#                <h3 class="page-header">执行结果</h3>#}

                {#                <div id="tab_detail" table_count={{ table_count }}></div>#}
            </div>
        </form>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">巡检记录</h3>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" name="user_search" class="form-control aa_search" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default" id="aa_search" aa_search="{{ search }}">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索
            </button>
        </form>
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>数据库</th>
                <th>连接串</th>
                <th>巡检耗时(s)</th>
                <th>巡检状态</th>
                <th>巡检报告</th>
                <th>历史报告</th>
                <th>巡检时间</th>

            </tr>
            </thead>
            <tbody id="tabbody">
            {% for i in current_page %}
                <tr>
                    <td style="display:none">{{ i.id }}</td>
                    <td>{{ i.db_name }}</td>
                    <td>{{ i.db_conn }}</td>
                    <td>{{ i.sub_time }}</td>
                    {% if i.status == 'SUCCESS' %}
                        <td style="color: green">{{ i.status }}</td>
                    {% else %}
                        <td style="color: red">
                        <span data-toggle="tooltip" data-placement="bottom"
                              title="{{ i.err_msg }}">{{ i.status }}</span>
                        </td>
                    {% endif %}
                    <td>
                        <a style="cursor:pointer"
                           href="/oratk_app/oratk_monitor_view_monitor_report?nid={{ i.id }}"
                           target="_blank">查看报告内容</a>
                    </td>
                    <td><a style="cursor:pointer;" onclick="show_report_history('{{ i.db_name }}')">历史报告</a></td>
                    <td>{{ i.start_time }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {#        以上是分页#}
        {% include 'basic_app/paginator.html' %}
    </div>
    </div>

    {#//显示历史报告模态框#}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog_edit">
            <div class="modal-content" style="width:1500px" id="report_history_modal">
            </div>

        </div>
    </div>

{% endblock %}

{% block script %}
    <script>
        function button_monitor() {
            var template_def = $('#template').find("option:checked").attr("id");
            var select_conn = $('#conn_string').val();
            if (template_def == 'def' || select_conn == null) {
                if (template_def == 'def') {
                    alert('请选择模板')
                } else {
                    alert('请选择实例')
                }
                return false;
            } else {
                template_name = $('#template').val();
                $.ajax({
                    type: "POST",
                    data: {
                        'conn_string': JSON.stringify(select_conn),
                        'template_name': template_name
                    },
                    url: "/oratk_app/oratk_monitor_immediate_new", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    beforeSend: function () {
                        // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                        showLoading()
                        $('#bt_monitor').button('loading')
                    },
                    complete: function () {
                        //$('#loadingModal').modal('hide');
                        hideLoading()
                        $('#bt_monitor').button('reset')
                    },
                    success: function (result) {
                        if (result === 'SUCCESS') {
                            location.reload();
                        } else {
                            alert('巡检报错: ' +
                                result);
                        }
                    }
                })
            }
        }

        function show_report_history(db_name) {
            console.log(1)
            $.ajax({
                type: "POST",
                data: {
                    'db_name': db_name
                },
                url: "/oratk_app/oratk_monitor_immediate_report_history_ajas", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    if (result.substr(0, 8) == "AJAX_ERR") {
                        alert(result);
                    } else {
                        $("#report_history_modal").html(result)
                        $('#myModal').modal('show')
                    }
                }
            })

        }

        //查看编辑脚本内容模态框居中
        $("#myModal").on('show.bs.modal', function () {
            modalResize_edit()
        })
        //编辑脚本内容模态框居中
        $(window).resize(function () {
            modalResize_edit();
        })

        function modalResize_edit() {
            var winWidth = $(document.body).width();
            var modalWidth = $("#report_history_modal").width();
            var width = (winWidth - modalWidth) / 2 + "px"
            console.log(winWidth, modalWidth, width)
            $("#myModal").find(".modal-dialog").css({
                'margin-left': width
            });
        }
    </script>
{% endblock %}
